<template>
  <div class="page" v-if="res">
    <div class="head">
      <h1>{{$t('与 #')}}{{ res.firstMonkey.id }} {{$t('生育')}}</h1>
    </div>
    <div class="panel">
      <div class="mates">
        <div class="goods">
          <div class="img">
            <img :src="res.secondMonkey.facade" :style="{background: res.secondMonkey.background}">
          </div>
          <span>#{{ res.secondMonkey.id }}  ·  {{ res.secondMonkey.generation }} {{$t('代')}}  ·  {{ res.secondMonkey.weight }} kg</span>
        </div>
        <div class="love">
          <div class="heart">
            <svg width="80" height="80" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
                        <path d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z" />
                      </svg>
          </div>
          <div class="heart">
            <svg width="70" height="70" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
                        <path d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z" />
                      </svg>
          </div>
          <div class="heart">
            <svg width="68" height="68" viewBox="0 0 800 700" xmlns="http://www.w3.org/2000/svg">
                        <path d="m263.42 235.15c-66.24 0-120 53.76-120 120 0 134.76 135.93 170.09 228.56 303.31 87.574-132.4 228.56-172.86 228.56-303.31 0-66.24-53.76-120-120-120-48.048 0-89.402 28.37-108.56 69.188-19.161-40.817-60.514-69.188-108.56-69.188z" />
                      </svg>
          </div>
        </div>
        <div class="goods">
          <div class="img">
            <img :src="res.firstMonkey.facade" :style="{background: res.firstMonkey.background}">
          </div>
          <span>#{{ res.firstMonkey.id }} · {{ res.firstMonkey.generation }} {{$t('代')}} · {{ res.firstMonkey.weight }} kg</span>
        </div>
      </div>
      <box gap="20px 0" v-if="!res.childMonkey">
        <x-button class="btn" plain @click.native="breedConfirm">
          <p>{{ res.coin }} 猴毛</p>
          <span>{{ $t('立即付款') }}</span>
        </x-button>
      </box>
      <div class="done" v-else>
        <icon class="icon" type="success" is-msg></icon>
        <p>生育完成</p>
        <div class="goods">
          <div class="img">
            <img :src="res.childMonkey.facade" :style="{background: res.childMonkey.background}">
          </div>
          <span>#{{ res.childMonkey.id }} · {{ res.childMonkey.generation }} {{$t('代')}} · {{ res.childMonkey.weight }} kg</span>
        </div>
        <div class="go">
          <p>小猴 # {{ res.childMonkey.id }} {{$t('属于你啦！')}}</p>
          <router-link :to="`/home`" replace>{{$t('去查看')}}>></router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<i18n>
'与 #':
  en: Sire with
繁殖:
  en: ' '
</i18n>
<script>
  import {
    XButton,
    Box,
    Icon
  } from 'vux'
  export default {
    components: {
      XButton,
      Box,
      Icon
    },
    data() {
      return {
        res: null
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.tid = this.$route.query.tid;
        this.monkeyId = this.$route.query.id;
        this.initData();
      });
    },
    methods: {
      initData() {
        this.$http
          .post(`/game/v2/bearStart`, {
            id: this.tid,
            secondId: this.monkeyId
          })
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      breedConfirm() {
        var that = this;
        this.$vux.confirm.show({
          title: `与小猴 #${that.res.firstMonkey.id} 进行生育`,
          content: `
                    <p>确认以${that.res.coin}猴毛的价格让小猴 # ${that.res.secondMonkey.id} 和 小猴 # ${that.res.firstMonkey.id}<strong style="color: red">进行生育</strong>吗?</p>
                    <p style="color: red">生育成功后，小猴将不能退回哦！</p>
                    `,
          cancelText: '取消',
          confirmText: '确认生育',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.breed()
          }
        })
      },
      breed() {
        var that = this;
        this.$http
          .post(`/game/v2/bearMonkey`, {
            id: this.res.id,
            pwd: this.safePwd,
            secondId: this.res.secondMonkey.id
          })
          .then(res => {
            if (res.code == 200) {
              // this.buying = false
              this.res.childMonkey = res.result
            } else if (res.code == 602) {
              // 账户余额不足
              this.$vux.confirm.show({
                title: this.$t('余额不足'),
                content: this.$t('账户余额不足，无法完成交易！'),
                confirmText: this.$t('去充值'),
                onCancel() {},
                onConfirm() {
                  that.$router.push('/mine?recharge=1')
                }
              })
            } else if (res.code == 603) {
              // 未设置安全密码
              this.$vux.confirm.show({
                title: this.$t(`提示`),
                content: this.$t(`你还未设置安全密码！`),
                confirmText: this.$t('去设置'),
                onConfirm() {
                  that.$router.push('/mine?pwd=true')
                }
              })
            } else if (res.code == 604) {
              // 未输入安全密码
              this.safePwd = '';
              if (res.msg == this.$t('安全密码错误')) {
                this.$vux.toast.text(res.msg)
              }
              
              this.$vux.confirm.prompt(this.$t('请输入安全密码'), {
                title: this.$t('安全验证'),
                inputAttrs: {
                  type: 'password'
                },
                onConfirm(value) {
                  that.safePwd = value;
                  that.breed()
                }
              })
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mates {
    padding: 20px 0 10px;
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
    align-items: center;
    justify-content: center;
    display: flex;
    .goods {
      flex-shrink: 0;
      width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      .img {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        img {
          width: 100%;
          background-color: #d9f5cb;
        }
      }
      span {
        font-size: 12px;
        color: $grey;
        white-space: nowrap;
      }
    }
    .love {
      flex: 1;
      max-width: 100px;
      height: 120px;
      position: relative;
      align-self: flex-start;
    }
  }
  .btn {
    width: 185px;
    height: 64px;
    line-height: 1;
    border: 1px solid $green;
    p {
      font-size: 20px;
      color: $green;
    }
    span {
      font-size: 12px;
      color: $gray;
    }
  }
  .done {
    padding: 20px 12px 20px;
    text-align: center;
    .icon {
      font-size: 50px;
    }
    p {
      font-size: 14px;
      color: $grey;
    }
    span {
      font-size: 10px;
      color: $grey;
      word-break: break-all;
    }
    .goods {
      margin-top: 10px;
      .img {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        img {
          width: 100%;
          background-color: #d9f5cb;
        }
      }
      span {
        font-size: 12px;
        color: $grey;
      }
    }
    .go {
      margin-top: 10px;
      font-size: 14px;
      p {
        color: #000;
      }
      a {
        color: $link;
      }
    }
  }
  .heart {
    position: absolute;
    bottom: 40px;
    &:nth-child(1) svg {
      opacity: 0;
      -webkit-animation: heartUp 1.4s infinite ease-in;
      animation: heartUp 1.4s infinite ease-in;
    }
    &:nth-child(2) svg {
      position: absolute;
      left: 1rem;
      opacity: 0;
      -webkit-animation: heartUp 1.4s 0.3s infinite ease-in;
      animation: heartUp 1.4s 0.3s infinite ease-in;
    }
    &:nth-child(3) svg {
      position: absolute;
      left: 0.5rem;
      opacity: 0;
      -webkit-animation: heartUp 1.4s 0.6s infinite ease-in;
      animation: heartUp 1.4s 0.6s infinite ease-in;
    }
  }
  svg {
    fill: #f58d9c;
  }
  @-webkit-keyframes heartUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0) rotate(10deg);
      transform: translate3d(0, 0, 0) rotate(10deg);
    }
    50% {
      opacity: 1;
    }
    65% {
      opacity: 1;
    }
    90% {
      opacity: 0;
      -webkit-transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
      transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes heartUp {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0) rotate(10deg);
      transform: translate3d(0, 0, 0) rotate(10deg);
    }
    50% {
      opacity: 1;
    }
    65% {
      opacity: 1;
    }
    90% {
      opacity: 0;
      -webkit-transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
      transform: translate3d(0, -35vh, 0) scale(1.2) rotate(-10deg);
    }
    100% {
      opacity: 0;
    }
  }
</style>
